---
const clients = [
  {
    name: "1",
    logo: "http://demo.openauth.net.cn:8887/upload_files/200516065826546.png", 
    website: "#"
  },
  {
    name: "2",
    logo: "https://www.sinopharmholding.com/portals/0/Skins/Gone/img/logo.png",
    website: "#"
  },
  {
    name: "3",
    logo: "http://www.cqjft.com/images/logo.png",
    website: "#"
  },
  {
    name: "4",
    logo: "http://asdrobotics.com/template/asd/images/logo.png",
    website: "#"
  },
  {
    name: "5",
    logo: "http://www.arscmh.com/template/1/default/_files/images/logo.png",
    website: "#"
  },
  {
    name: "6",
    logo: "http://www.17gp.com/images/logo5.png",
    website: "#"
  },
  {
    name: "7",
    logo: "https://cq-p.com.cn/cqpwps/images/index/logo_sys.gif",
    website: "#"
  },
  {
    name: "8",
    logo: "http://www.ut-soft.cn/static/assets/img/logo/logo.png",
    website: "#"
  },
  {
    name: "9",
    logo: "https://files.esurl.cn/esmartwave/2018/img/yuanhui.png",
    website: "#"
  },
  {
    name: "10",
    logo: "http://www.sxhtbf.com/uploadfiles/pictures/setting/20160316141249_1093.jpg",
    website: "#"
  },
  {
    name: "11",
    logo: "https://zhengxin-pub.cdn.bcebos.com/logopic/6ff3cf1658391c72ea5a5d5061f7c43f_fullsize.jpg",
    website: "#"
  },
  {
    name: "12",
    logo: "http://www.xinyegroup.com/templates/main/images/logo.png",
    website: "#"
  }
];

// 将客户数据分为多行，每行显示最多6个客户
const clientsPerRow = 6;
const rows = [];

for (let i = 0; i < clients.length; i += clientsPerRow) {
  rows.push(clients.slice(i, i + clientsPerRow));
}
---

<section id="clients" class="section py-8">
  <div class="container-custom">
    <div class="text-center max-w-3xl mx-auto mb-8">
      <h2 class="mb-3 text-gray-900 dark:text-white">我们的客户</h2>
      <p class="text-gray-600 dark:text-gray-300">
        与行业领先企业合作，提供卓越的解决方案
      </p>
    </div>
    
    <div class="overflow-hidden">
      {rows.map((row, rowIndex) => (
        <div class={`marquee-container ${rowIndex < rows.length - 1 ? 'mb-6' : ''}`}>
          <div class="gradient-mask"></div>
          <div class={`marquee ${rowIndex % 2 === 0 ? 'marquee-slow' : 'marquee-fast'}`}>
            {row.map((client) => (
              <a 
                href={client.website}
                target="_blank"
                rel="noopener noreferrer"
                class="client-logo-card flex items-center justify-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 mx-4 shadow-sm w-40 h-20"
              >
                <img 
                  src={client.logo} 
                  alt={`${client.name} 标志`} 
                  class="max-h-12 max-w-full transition-all duration-300"
                  loading="lazy"
                />
              </a>
            ))}
            {/* 复制一份同样的内容以实现无缝循环 */}
            {row.map((client) => (
              <a 
                href={client.website}
                target="_blank"
                rel="noopener noreferrer"
                class="client-logo-card flex items-center justify-center p-4 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 mx-4 shadow-sm w-40 h-20"
              >
                <img 
                  src={client.logo} 
                  alt={`${client.name} 标志`} 
                  class="max-h-12 max-w-full transition-all duration-300"
                  loading="lazy"
                />
              </a>
            ))}
          </div>
        </div>
      ))}
    </div>
  </div>
</section>

<style>
  /* 跑马灯容器样式 */
  .marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  /* 左右渐变淡入淡出效果 */
  .gradient-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0) 5%,
      rgba(255, 255, 255, 0) 95%,
      rgba(255, 255, 255, 1) 100%
    );
    z-index: 2;
  }

  /* 深色模式下的渐变 */
  @media (prefers-color-scheme: dark) {
    .gradient-mask {
      background: linear-gradient(
        90deg,
        rgba(17, 24, 39, 1) 0%,
        rgba(17, 24, 39, 0) 5%,
        rgba(17, 24, 39, 0) 95%,
        rgba(17, 24, 39, 1) 100%
      );
    }
  }

  /* 跑马灯基础样式 */
  .marquee {
    display: flex;
    width: max-content;
    animation-name: marquee;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    position: relative;
  }

  /* 不同速度的跑马灯 */
  .marquee-slow {
    animation-duration: 40s;
  }

  .marquee-fast {
    animation-duration: 20s;
  }

  /* 跑马灯动画 */
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  /* 淡入淡出效果 */
  .client-logo-card {
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
  }

  .client-logo-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }
</style>